<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#0C83CC" sliderBgColor="#0C83CC"
		 @change="change"></tui-tabs>
		<view :class="{'tui-order-list':scrollTop>=0}">
			<!-- 接龙案例 -->
			<view class="tuiTips" v-if="empty == 0 && rareData.length == 0" >
				<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
			</view>
			<view class="case" v-for="(item,index) in rareData" :key="index">
				<view class="case_box" @click="details('../dragon/details?id='+item.id+'&currentTab='+currentTab)">
					
					<tui-card v-if="currentTab == 0" :image="imageurl(item.imageurl)" :title="nickname(item.nickname)" :tag="price(item.buy_amount)" :time="formatDate(item.create_time)" >
						<!-- :status="{text:'已参团',color: '#0a8fe2'}" -->
						<template v-slot:body>
							<view  class="case_box_title">{{item.title}}</view>
							<view class="case_boxi_content">
							{{item.details_text}}
							</view>
						</template>
						<template v-slot:footer>
							<view class="case_box_des">
								<view class="case_box_time"> 
									<view class="tui-badge-dot " :class="item.status != 1?'tui-gray':''"></view> 
									<text class="case_box_time_text" :class="statusList[item.status].color">接龙{{statusList[item.status].title}}</text>
								</view>
								<view class="case_box_right">
									<!-- <tui-icon name="eye" size="21" color="#0a8fe2"></tui-icon> -->
									<image  class="eye" src="../../static/my/eye.png"></image>
									<text style="padding:0px 10rpx;">{{item.view_count}}</text>
									<!-- <tui-icon name="friendadd-fill" size="16" color="#0a8fe2"></tui-icon> -->
									<image  class="people" src="../../static/my/people.png"></image>
									<text style="padding: 0rpx 10rpx;">{{item.buy_count}}</text>
								</view>
							</view>
						</template>
					</tui-card>				
					
					<tui-card v-else  :goodsTitle="nickname(item.title)" :tag="price(item.buy_amount)" :time="formatDate(item.create_time)" >
						<!-- :status="{text:'已参团',color: '#0a8fe2'}" -->
						<template v-slot:body>
							<!-- <view  class="case_box_title">{{item.title}}</view> -->
							<view class="case_boxi_content">
							{{item.details_text}}
							</view>
						</template>
						<template v-slot:footer>
							<view class="case_box_des">
								<view class="case_box_time"> 
									<view class="tui-badge-dot " :class="item.status != 1?'tui-gray':''"></view> 
									<text class="case_box_time_text" :class="statusList[item.status].color">接龙{{statusList[item.status].title}}</text>
								</view>
								<view class="case_box_right">
									<!-- <tui-icon name="eye" size="21" color="#0a8fe2"></tui-icon> -->
									<image  class="eye" src="../../static/my/eye.png"></image>
									<text style="padding:0px 10rpx;">{{item.view_count}}</text>
									<!-- <tui-icon name="friendadd-fill" size="16" color="#0a8fe2"></tui-icon> -->
									<image  class="people" src="../../static/my/people.png"></image>
									<text style="padding: 0rpx 10rpx;">{{item.buy_count}}</text>
								</view>
							</view>
						</template>
					</tui-card>
					
				</view>
			</view>
			<!-- 接龙案例 -->
		</view>
	
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="red" v-if="empty == 1"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" v-if="empty == 1"></tui-nomore>
		<!--加载loadding-->
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
		<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN"></button>
		
	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiButton from "@/components/extend/button/button"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiSticky from "@/components/sticky/sticky"
	import tuiCard from "@/components/card/card"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"

	export default {
		components: {
			tuiTabs,
			tuiButton,
			tuiLoadmore,
			tuiNomore,
			tuiListCell,
			tuiSticky,
			tuiIcon,
			tuiCard,
			tuiTag,
			tuiToast,
			tuiTips
		},
		data() {
			return {
				userInfo: '',
				tabs: [{
					name: "最近浏览"
				}, {
					name: "我发布的"
				},
				],
				empty: 1,
				statusList: [],
				currentTab: 0,
				// pageIndex: 1,
				page: 1,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				rareData: [],
				serverUrl:[
					'jielong/browseList',
					'jielong/userList',
				]
			}
		},
		onLoad: function(options){
			wx.hideShareMenu();
		},
		onShow: function() {
			if(getApp().globalData.currentTab == '1'){
				this.currentTab = getApp().globalData.currentTab;
				getApp().globalData.currentTab = '0';
			}else{
				this.currentTab = '0';
			}
			this.userInfo = uni.getStorageSync('userInfo')
			
			if(this.userInfo){
				this.loadData();
			}else{
				this.empty = 0
				this.loadding = false
				this.pullUpOn = false
			}
		}, 
		methods: {
			price: function(amount){
				return {text: '￥'+ this.tui.centsToYuan(amount) ,color:'#f7374f', size:'32'};
			},
			formatDate: function (timestamp) {
				// dataTime.getDateDiff(timestamp)
				return {text: dataTime.getDateDiff(timestamp)}
			},
			nickname: function(nickname){
				return {text: nickname};
			},
			imageurl: function(image){
				return {url: image};
			},
			loadData: function(){
				let pagesize = 5
				if(!this.userInfo){
					return false
				}
				this.loadding = true
				this.tui.request(this.serverUrl[this.currentTab],{page_size: pagesize,page:this.page}).then((res) => {
					this.statusList = res.statusList
					if(res.data.list.length > 0){
						this.loadding = false
						this.pullUpOn = true
						this.empty = 1
						this.page++
						for( let i = 0; i < res.data.list.length; i++ ){
							this.rareData.push(res.data.list[i])
						}
						// this.rareData = res.data.list
					}else{
						this.loadding = false
						this.pullUpOn = false
					}
					if(res.data.list.length == 0 &&  this.page == 1){
						this.empty = 0
					
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			change: function(e) {
				this.currentTab = e.index
				if(!this.userInfo){
					return false
				}
				this.page = 1
				this.loadding = false
				this.pullUpOn = true
				this.rareData = []
				this.loadData();
			},
			details: function(url,type){
				if(!url){
					return false;
				}
				if(type == 1){
					uni.switchTab({
						url: url,
					});
					return false
				}
				uni.navigateTo({
				   url: url,
				});
			},
			//授权登录
			wxGetUserInfo: function() {
				let that = this;
				that.tui.wxLogin().then((res)=>{
					if(res.code == '0000'){
						that.userInfo = res
						this.rareData = []
						this.loadData();
					}
				});
			},
		},
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom: function() {
			if(this.pullUpOn == true){
				this.loadData();
			}
			// 只是测试效果，逻辑以实际数据为准
			this.loadding = true
			this.pullUpOn = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},

	}
</script>

<style>
	@import '../../static/style/thorui.css';
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	/* tab */
	.tui-tabs-active{
		color: #0C83CC !important;
		font-weight: 400;
	}
	.tui-tabs-slide{
		background: #0C83CC !important;
	}
	.tui-order-list {
		margin-top: 80rpx;
		/* padding-bottom: 100rpx; */
	}
	.colorLan{
		color: #0a8fe2 !important;
		font-size: 35rpx !important;
		font-weight: 500 !important;
	}
	.tui-tabs-item{
		width: 50% !important;
	}
	/* tab */


	/* 接龙案例 */
	.case_box_des {
		width: 100%;
		/* padding: 10rpx 20rpx; */
		padding: 30upx 20upx;
		margin: 10rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
	}
	.case_box_time{
		padding-left: 5rpx;
	}
	.case_box_time_text{
		color: #b1b1b1;
		padding-left: 10rpx;
	}
	.case_box_right{
		color: #0a8fe2;
		font-weight: 500;
		
	}
	.case{
		/* background: #FFFFFF; */
		padding: 0 20rpx 0 20rpx;
	}
	.case_title{
		font-size: 35rpx;
		font-weight: 700;
		padding-top: 20rpx;
	}
	.case_describe{
		font-size: 28rpx;
		color: #a6a6a6;
		padding-top: 10rpx;
		line-height: 60rpx;
	}
	.case_box{
		/* padding: 0px 0px 40px 0px; */
	}
	.tui-header-right{
		margin-bottom: 35rpx;
	/* 	margin-top: -40rpx !important;
		margin-right: -10px !important; */
		/* color: #FFFFFF !important; */
		/* background: #CCCCCC !important; */
		/* padding: 5rpx 10rpx ; */
	}
	.tui-header-title{
		font-size: 30rpx !important;
		font-weight: 500;
		margin-top: 10rpx !important;
		color: #000000 !important;
	}
	.tui-title {
		width: 100%;
		padding: 70upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		line-height: 30upx;
		color: #666;
	}
	.case_box_title{
		padding-left: 20rpx !important;
		margin: 25rpx auto !important;
		font-weight: 550;
	}
	.case_boxi_content {
		padding: 0upx 20upx;
		margin: 5rpx auto;
		color: #9e9e9e;
		font-size: 28rpx;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
/* 	.case_boxi_footer{
		padding: 30upx 20upx;
		color: #f40e2a;
		font-size: 35rpx;
		font-weight: 500;
	} */
	.tui-card{
		margin: 0rpx !important;
		margin-top: 20rpx !important;
		box-shadow: 0 0 3rpx #eee !important;
		border: 1rpx solid #f5f5f5 !important;
	}
	.tui-header-thumb{
		border-radius: 50% !important;
		width: 90rpx !important;
		height: 90rpx !important;
	}
	.text-green{
		color: #000000 !important;
	}
	.text-red ,.text-grey,.text-blue,.text-orange{
		color: #999999 !important;
	}
	/* 接龙案例 */
	
	/* tuiTips */
	.tuiTips{
		margin-top: 30% ;
	}
	.tui-tips-content{
		font-size: 30rpx !important; 
		color: #cccccc !important;
	}
	/* tuiTips */

	.tui-tabs-title{
		font-size: 30rpx !important;
		font-weight: 400 !important;
	}
	.tui-badge-dot{
		background: #0A8FE2 !important;
	}
	
	.text-green {
		color: #0A8FE2 !important;
	}
	.tui-gray{
		background: #CCCCCC !important;
	}
	.people{
		width: 30rpx;
		height: 24rpx;
		display: inline-block;
	}
	.eye{
		width: 36rpx;
		height: 20rpx;
		display: inline-block;
		
	}
	.tui-nomore::after{
		background: none !important;
	}
	.tui-header-title-time{
		color: #999 !important;
	}
	.font-Tag{
		font-weight: 550 !important;
	}
	.tui-header-title-goods{
		font-weight: 550;
	}
</style>
